<script setup lang="ts">
import { useOverflow } from '@/hooks/useOverflow'
import { ref } from 'vue'

interface Props {
    name?: string
    time?: string
    score?: number
    price?: string
    content?: string
}

// 提供默认值
defineProps<Props>()

const expand = ref(false)
const { target, isOverflow } = useOverflow(24, 3)
</script>

<template>
    <div class="w-full shrink-0 rounded-lg border border-[#494949] bg-[#8686861A] p-3">
        <div class="flex items-center border-b border-[#302F2F] pb-3">
            <img class="h-6 w-6 rounded-full" src="/images/user-logo.jpg" alt="" />
            <span class="inline-block pr-3 pl-2.5 text-base leading-none font-medium">{{ name }}</span>
            <span class="text-sm text-[#9F9F9F]">{{ time }}</span>
        </div>
        <div class="flex items-center border-b border-[#302F2F] py-3 mb-3">
            <a-rate class="!flex !text-[#FF6A00]" :value="score" allow-half />
            <span class="ml-1.5 inline-block text-[15px] leading-none font-medium text-[#FF6A00]">{{ score }}</span>
            <span class="ml-6 inline-block leading-none">{{ price }}</span>
        </div>
        <div ref="target" class="relative leading-6" :class="!expand ? 'line-clamp-3' : 'line-clamp-none'">
            {{ content }}
            <a-button v-if="isOverflow" type="text" size="small" class="!bg-[#232323] !text-[#FFC25D]"
                :class="{ '!absolute right-0 bottom-0': isOverflow && !expand }" @click="expand = !expand">
                詳細を見る
            </a-button>
        </div>
    </div>
</template>

<style lang="scss" scoped></style>
